<template>
    <div class="carLoan">
        <Form ref="carLoanForm" :model="carLoanForm"  :label-width="100">
            <div style="padding-left: 0px;"> 
                 <Row>
                    <Col>
                        <FormItem label="车辆价格(元)"> 
                            <Input v-model="carLoanForm.oldValue.guidePrice"   placeholder="" :readonly="readonly"/>
                        </FormItem> 
                    </Col>
                </Row>
                <Row>
                      <Col>
                        <FormItem label="贷款期限"> 
                            <div class="inline-block" v-if="carLoanForm.newValue.loanLimit"> 
                                <Input v-model="carLoanForm.newValue.loanLimit" style="width:60px" placeholder="" :readonly="readonly"/>
                                <span  class="commonSpan">期</span>
                            </div>
                            <div class="oldValue">
                                <span>{{carLoanForm.oldValue.loanLimit}}</span><b style="font-weight: normal;">期</b>
                            </div> 
                        </FormItem> 
                    </Col>
                </Row>
                 <Row>
                      <Col span="12">
                        <FormItem label="首付"> 
                            <div  class="inline-block" v-if="carLoanForm.newValue.downPayScale">
                                <Input v-model="carLoanForm.newValue.downPayScale" style="width:60px" placeholder="" :readonly="readonly"/>
                                <span class="commonSpan">%</span>
                            </div>
                            <div class="oldValue">
                                <span>{{carLoanForm.oldValue.downPayScale}}</span><b style="font-weight: normal;">%</b>
                            </div>
                        </FormItem> 
                    </Col>
                    <Col span="12">
                        <FormItem label="" :label-width="20"> 
                            <div  class="inline-block" v-if="carLoanForm.newValue.downPayAmt">
                                <Input v-model="carLoanForm.newValue.downPayAmt" style="width: 120px;" placeholder="" :readonly="readonly"/>
                                <span class="commonSpan">元</span>
                            </div>
                            <div class="oldValue">
                                <span>{{carLoanForm.oldValue.downPayAmt}}</span><b style="font-weight: normal;">元</b>
                            </div>
                        </FormItem> 
                    </Col>
                </Row>
                  <Row v-if="isTail">
                      <Col span="12">
                        <FormItem label="尾款"> 
                            <div class="inline-block" v-if="carLoanForm.newValue.tailPayScale">
                                <Input v-model="carLoanForm.newValue.tailPayScale" style="width:60px" placeholder="" :readonly="readonly"/>
                                <span class="commonSpan">%</span>
                            </div>
                            <div class="oldValue">
                                <span>{{carLoanForm.oldValue.tailPayScale}}</span><b style="font-weight: normal;">%</b>
                            </div>
                        </FormItem> 
                    </Col>
                    <Col span="12">
                        <FormItem label="" :label-width="20" class="inline-block"> 
                            <div  class="inline-block" v-if="carLoanForm.newValue.tailPayAmt">
                                <Input v-model="carLoanForm.newValue.tailPayAmt" style="width: 120px;" placeholder="" :readonly="readonly"/>
                                <span class="commonSpan">元</span>
                            </div>
                            <div class="oldValue">
                                <span>{{carLoanForm.oldValue.tailPayAmt}}</span><b style="font-weight: normal;">元</b>
                            </div>
                        </FormItem> 
                    </Col>
                </Row>
                 <Row>
                    <Col>
                        <FormItem label="贷款金额(元)"> 
                            <div  class="inline-block" v-if="carLoanForm.newValue.loanAmt">
                                <Input v-model="carLoanForm.newValue.loanAmt" class="w200" placeholder="" :readonly="readonly"/>
                                <span class="commonSpan">元</span>
                            </div>
                            <div class="oldValue">
                                <span>{{carLoanForm.oldValue.loanAmt}}</span><b style="font-weight: normal;">元</b>
                            </div>
                        </FormItem> 
                    </Col>
                 </Row>
            </div>
        </Form>
    </div>
</template>
<script>
export default {
    name:"carLoan",
    data(){
        return{
           isTail:0,
           readonly:true,
           carLoanForm:{
               newValue:{

               },
               oldValue:{

               },
           },
        }
    },
    props:{
        carCostDetails:{
            type:Object,
        },

    },
    created(){
       
    },
    watch:{
        carCostDetails(val){
            if(Object.keys(val).length>0){
                this.isTail=eval(val.isTail);
                console.log(val,"val-carLOAN")
                let {newCarValue,oldCarValue}=val;
                this.carLoanForm.newValue=newCarValue;
                this.carLoanForm.oldValue=oldCarValue;
            }
        }
    },
    mounted(){
       
    },
    methods:{

    }
}
</script>
<style scoped>
.commonSpan{
    position: absolute;
    margin-left: -16px;
}

.oldValue{
    display:inline-block;
    margin-left: 10px;
}
</style>